<template>
  <div>
    <div style="margin-right: 1550px">
      <p>
        <el-icon>
          <House />
        </el-icon>
        <sapn style="color: #0098ff; padding-left: -1000px">工作台</sapn>
      </p>
    </div>
    <div class="five">
      <div class="three"><strong>待办事项</strong></div>
      <div class="five">
        <el-row :gutter="20">
          <el-col :span="4"> 待调度订单 </el-col>
          <el-col :span="5"> 待发车运单 </el-col>
          <el-col :span="5"> 在途运单 </el-col>
          <el-col :span="5"> 待签收订单 </el-col>
          <el-col :span="5"> 待处理异常事件 </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-button link type="primary" size="large" @click="click1">
              <strong style="font-size: 25px">{{ count1 }}</strong>
            </el-button>
          </el-col>
          <el-col :span="5">
            <el-button link type="primary" size="large" @click="click2">
              <strong style="font-size: 25px">{{ count2 }}</strong>
            </el-button>
          </el-col>
          <el-col :span="5">
            <el-button link type="primary" size="large" @click="click2">
              <strong style="font-size: 25px">{{ count3 }}</strong>
            </el-button>
          </el-col>
          <el-col :span="5">
            <el-button link type="primary" size="large" @click="click1">
              <strong style="font-size: 25px">{{ count4 }}</strong>
            </el-button>
          </el-col>
          <el-col :span="5">
            <el-button link type="primary" size="large" @click="click3">
              <strong style="font-size: 25px">{{ count5 }}</strong>
            </el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="container">
      <div class="chart-container">
        <div class="two"><strong>本年订单趋势</strong></div>
        <div ref="chartRef" style="width: 600px; height: 400px"></div>
        <div class="container2">
          <div class="one"></div>
          <div style="margin-left: 10px">
            <strong>订单每月数量</strong>
          </div>
        </div>
      </div>
      <div class="chart-container">
        <div class="two"><strong>本年运单年趋势</strong></div>
        <div ref="YDchartRef" style="width: 600px; height: 400px"></div>
        <div class="container2">
          <div class="one"></div>
          <div style="margin-left: 10px">
            <strong>运单每月数量</strong>
          </div>
        </div>
      </div>
    </div>

    <div style="padding-left: 100px; padding-top: 50px">
      <div style="margin-left: -1600px; margin-bottom: 20px">
        <strong>订单展示</strong>
      </div>
      <el-table :data="tableData" style="width: 1200px; height: 410px">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column
          property="ord_id"
          label="订单id"
          width="120"
          v-if="false"
        />
        <el-table-column property="ord_number" label="订单号" width="120" />
        <el-table-column
          property="ord_startaddress"
          label="始发地"
          width="120"
        />
        <el-table-column
          property="ord_destination"
          label="目的地"
          width="120"
        />
        <el-table-column property="client_name" label="客户名称" width="120" />
        <el-table-column property="ord_state" label="订单状态" width="120">
          <template #default="scope">
            <span>{{ formatOrderState(scope.row.ord_state) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="ord_source" label="货物类型" width="120" />
        <el-table-column property="ord_remark" label="货物数量" width="120" />
        <el-table-column property="totalvolume" label="总体积" width="120" />
        <el-table-column property="weight" label="总重量" width="120" />
        <el-table-column
          property="freight_count"
          label="运费合计"
          width="120"
        />
        <el-table-column property="ord_time" label="下单时间" width="120" />
      </el-table>
    </div>
    <div style="margin-left: 850px;padding-top: 20px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="PageSize"
        :page-sizes="[10, 20, 30, 40]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import $http from "@/axios/base.js";
import * as echarts from "echarts";
import router from "@/router";
export default {
  setup() {
    const chartRef = ref(null);
    const YDchartRef = ref(null);
    let month = ref([
      "01",
      "02",
      "03",
      "04",
      "05",
      "06",
      "07",
      "08",
      "09",
      "10",
      "11",
      "12",
    ]); //曲线图的x轴
    let month2 = ref([]); //曲线图y轴
    // let month3=ref(['10','20']);
    let month3 = ref([]); //订单曲线图数据
    let YDtableData = ref([]); //运单曲线图数据
    let tableData = ref([]); //订单数据
    let currentPage = ref(1); //页
    let PageSize = ref(10); //条数
    let count = ref(""); //数据总数量
    let count1 = ref(0); //待调度订单数
    let count2 = ref(0); //待发车运单数
    let count3 = ref(0); //运输中运单数
    let count4 = ref(0); //待签收订单数
    let count5 = ref(0); //待处理的异常数

    const initChart = () => {
      //订单曲线图
      if (chartRef.value) {
        const myChart = echarts.init(chartRef.value);
        // 设置图表的配置项和数据
        myChart.setOption({
          xAxis: {
            type: "category",
            data: month.value,
          },
          yAxis: {
            type: "value",
          },
          axisPointer: { show: false }, // 禁用 axisPointer
          series: [
            {
              data: month2.value,
              type: "line",
              smooth: true,
            },
          ],
        });
      }
    };

    onMounted(() => {
      initChart();
      show3();
      show();
      show4();
      show5();
      Order_count();
      Wb_meter();
      Wb_meter2();
      Order_count2();
      Ex_count();
    });

    function show3(value) {
      //订单曲线图y轴
      if (value == "" || value == null || value == undefined) {
        value = new Date().getFullYear().toString();
      }
      $http
        .get(`http://localhost:5261/api/Order_statistics/Get_time_sum/${value}`)
        .then((res) => {
          var list = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          res.forEach((item) => {
            list.splice(item.month - 1, 0, item.sum);
          });
          month2.value = list;
          initChart();
          console.log(month2.value);
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    const YDinitChart = () => {
      //运单曲线图
      if (YDchartRef.value) {
        const myChart = echarts.init(YDchartRef.value);
        // 设置图表的配置项和数据
        myChart.setOption({
          xAxis: {
            type: "category",
            data: month.value,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: YDtableData.value,
              type: "line",
              smooth: true,
            },
          ],
        });
      }
    };

    function show() {
      //运单曲线图y轴
      const value = new Date().getFullYear().toString();
      $http
        .get(`http://localhost:5261/api/Order_statistics/GetWb_meter/${value}`)
        .then((res) => {
          var list = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          res.forEach((item) => {
            list.splice(item.month - 1, 0, item.sum);
          });
          YDtableData.value = list;
          YDinitChart();
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function show4() {
      //订单表数据
      $http
        .get(
          `http://localhost:5261/api/Order/GetOrders?currentPage=` +
            currentPage.value +
            `&PageSize=` +
            PageSize.value
        )
        .then((res) => {
          tableData.value = res;
          console.log(tableData.value);
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function show5() {
      //查询数据总数量
      $http
        .get(`http://localhost:5261/api/Order_statistics/Count3`)
        .then((res) => {
          count.value = res;
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function handleSizeChange(value) {
      //条数的改变事件
      PageSize.value = value;
      show4();
    }

    function handleCurrentChange(value) {
      //页面的改变事件
      currentPage.value = value;
      show4();
    }

    function formatOrderState(status) {
      //转换订单状态
      switch (status) {
        case 1:
          return "待接单";
        case 2:
          return "待提货";
        case 3:
          return "待发车";
        case 4:
          return "运输中";
        case 5:
          return "待签收";
        case 6:
          return "已完成";
        case 7:
          return "已取消";
        case 8:
          return "已拒绝";
        default:
          return "未知状态";
      }
    }

    function Order_count() {
      //待调度的订单数
      $http
        .get(`http://localhost:5261/api/Order_statistics/GetOrders_count`)
        .then((res) => {
          count1.value = res;
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function Wb_meter() {
      //待发车的运单数
      $http
        .get(`http://localhost:5261/api/Order_statistics/GetWb_meter_count`)
        .then((res) => {
          count2.value = res;
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function Wb_meter2() {
      //待发车的运单数
      $http
        .get(`http://localhost:5261/api/Order_statistics/GetWb_meter_count2`)
        .then((res) => {
          count3.value = res;
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function Order_count2() {
      //待调度的订单数
      $http
        .get(`http://localhost:5261/api/Order_statistics/GetOrders_count2`)
        .then((res) => {
          count4.value = res;
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function Ex_count() {
      //待处理的异常数
      $http
        .get(`http://localhost:5261/api/Order_statistics/GetEx_count`)
        .then((res) => {
          count5.value = res;
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function click1() {
      router.push("/DDGL");
    }

    function click2() {
      router.push("/Wb_meter");
    }

    function click3() {
      router.push("/Wb_mExceptioneter");
    }

    return {
      chartRef,
      month,
      month3,
      YDtableData,
      YDinitChart,
      YDchartRef,
      tableData,
      currentPage,
      PageSize,
      count,
      formatOrderState,
      handleSizeChange,
      handleCurrentChange,
      count1,
      count2,
      count3,
      count4,
      count5,
      click1,
      click2,
      click3,
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  /* 使用flex布局使子元素在同一行显示 */
}

.container2 {
  display: flex;
  /* 使用flex布局 */
  align-items: center;
  /* 垂直居中对齐子元素 */
  margin-left: 250px;
}

.chart-container {
  text-align: center;
  /* 标题居中 */
}

.one {
  width: 15px;
  /* 设置圆的直径 */
  height: 15px;
  /* 设置圆的直径 */
  background-color: #5470c6;
  /* 设置圆的颜色 */
  border-radius: 50%;
  /* 将边框半径设置为50%，形成圆形 */
}

.two {
  margin-left: -457px;
}

.three {
  margin-left: -1530px;
}

.four {
  margin-left: 50px;
}

.five {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>